<script setup lang="ts">
  import useService from './service'
  import Pagination from '@/components/Pagination/index.vue'
  import { ref } from 'vue'
  import HStatus from '@/components/common/status/HStatus.vue'

  const props = defineProps({
    factoryId: {
      type: String,
      required: true,
    },
  })

  // 使用服务
  const { list, total, loading, getList } = useService

  // 分页组件实例
  const paginationRef = ref<InstanceType<typeof Pagination> | null>(null)

  /**
   * 获取请求参数
   */
  const getParam = () => {
    const result = {
      id: props.factoryId,
      pagination: {
        limit: 50,
        page: 1,
      },
    }

    if (paginationRef.value) {
      result.pagination.limit = paginationRef.value.size
      result.pagination.page = paginationRef.value.current
    }

    return result
  }

  /**
   * 获取数据方法
   */
  const getData = () => {
    getList(getParam().id, getParam().pagination)
  }

  defineExpose({
    total,
    getData,
  })
</script>

<template>
  <div class="factory_order_fee">
    <div class="table">
      <el-table
        v-loading="loading"
        :border="true"
        stripe
        resizable
        :data="list"
        style="width: 100%; position: absolute"
        height="100%"
      >
        <template #empty>
          <el-empty description="暂无数据" />
        </template>
        <!-- 序号 -->
        <el-table-column
          fixed="left"
          label="序号"
          min-width="50"
          show-overflow-tooltip
          type="index"
        />

        <!-- 费用单号 -->
        <el-table-column
          fixed="left"
          label="费用单号"
          min-width="160"
          prop="feeNo"
          show-overflow-tooltip
        />

        <!-- 工单单号 -->
        <el-table-column label="工单单号" prop="workNo" show-overflow-tooltip width="160" />

        <!-- 状态 -->
        <el-table-column label="状态" prop="state" width="83">
          <template #default="scope">
            <HStatus v-if="scope.row.status === 1" type="warning">待审核</HStatus>
            <HStatus v-if="scope.row.status === 2" type="success">已通过</HStatus>
            <HStatus v-if="scope.row.status === 3" type="error">已驳回</HStatus>
            <HStatus v-if="scope.row.status === 4" type="info">已撒回</HStatus>
            <HStatus v-if="scope.row.status === 5" type="info">已取消</HStatus>
          </template>
        </el-table-column>

        <!-- 结算类型 -->
        <el-table-column label="结算类型" prop="settlementType" show-overflow-tooltip width="100" />

        <!-- 项目费用名称 -->
        <el-table-column label="项目费用名称" prop="feeProject" show-overflow-tooltip width="100" />

        <!-- 支付服务商总费用 -->
        <el-table-column
          label="支付服务商总费用"
          prop="payNetworkTotalPrice"
          show-overflow-tooltip
          width="130"
        >
          <template v-slot="i">￥{{ Number(i.row.payNetworkTotalPrice || 0).toFixed(2) }}</template>
        </el-table-column>

        <!-- 申请人员 -->
        <el-table-column label="申请人员" prop="applyEmp" show-overflow-tooltip width="120" />

        <!-- 申请人员 -->
        <el-table-column label="审核人员" prop="reviewEmp" show-overflow-tooltip width="120" />

        <!-- 申请服务商 -->
        <el-table-column label="申请服务商" prop="network" show-overflow-tooltip width="150" />

        <!-- 申请时间 -->
        <el-table-column label="申请时间" prop="createTime" show-overflow-tooltip width="150" />

        <!-- 审核时间 -->
        <el-table-column label="审核时间" prop="reviewTime" show-overflow-tooltip width="150" />
      </el-table>
    </div>
    <div class="pagination">
      <Pagination
        ref="paginationRef"
        :list_total="total"
        @size-change="getData"
        @current-change="getData"
      />
    </div>
  </div>
</template>

<style scoped lang="scss">
  .factory_order_fee {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 12px;

    .table {
      margin: 0;
    }

    .pagination {
      display: flex;
      justify-content: flex-end;
    }
  }
</style>
